iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 1
0

前言

各位好,
我是一個從踏入寫程式就開始在製作後台的碼農,
以前都是用 PHP 寫系統,
所以早期畫面是 PHP 加義大利麵的方式寫出來的,
後幾年前後端技術可以完全分離後,
後端都已經全 API 化,而我也開始專注在前端。

最近這兩年我都是使用Angular開發,
想把一些開發實做相關記錄起來,如果文章有誤歡迎來信告知。

內容結構

主要呈現後台常見的功能,但因為時間跟篇幅也有限,
所以會以最小功能規模的後台 Demo 做展示。

demo

其實是模擬一個小型商店的後台,採人工key單的方式。

  • 基本結構 day02 ~ day15
  • 各功能模塊 day16 ~ day26
  • 連線方式 day27 ~ day30

注意事項

  • Demo 使用的 UI框架 會以Angular Materia為主,
    沒有使用bootstrap,因flexbox佈局就很方便了,
    本文章不會細說 css 的部分,
    但有需要請參考文章末端範例碼。

其實很多公司會有自己的設計風格,
不見得 UI框架 符合需求,有衝突還要花時間解決,
所以也是建議大家多磨練css基本功。

  • Demo 不採用jqery,其實很多功能我認為 Angular 就辦得到了,
    我目前做後台還沒有遇到非要用jqery的時候。

基本結構

開發時需要建造的基底,並會逐一說明比較常見的通用功能。

  • 全域css樣式
  • i18n翻譯
  • SharedModule應用
  • 全域service應用
  • 傳接值model
  • AppComponent初始要做的事情

--

各功能模塊

在功能切割上的主要大結構:

  • AppModule:根模塊。相關的會專注於全域的設定。

  • SharedModule:共用模塊。會把重複用到的功能都放在這裡。

  • CoreModule:核心模塊。比較像架,裝載後台各個功能模塊

CoreModule
    -- IndexModule
    -- UserModule
    -- AdminModule
    -- CustomerModule
    -- ProductModule
    -- OrderModule

主要說明CoreModule底下的 六種功能模塊

--

連線方式

目前Demo以json-server來模擬後端跟Database,
後面會說明以 firebasegRPC Web 的方式做。


基礎知識

本系列文主要在呈現後台的相關功能跟流程思維,
所以讀者們觀看要先有某些基礎。

  • 建議懂flexbox

  • 建議懂ajax,異步加載的相關知識。

  • 建議懂Rxjs的Observable,Subject..等,
    (我會簡述一下我理解的過程,以及我怎麼運用的。)

  • 建議有Angular基礎尤其是表單功能,網上很多教學文請各自研究。

  • 建議有後端DB,CRUD,正規化等基本的概念。


下一篇
day02 基礎架構
系列文
用Angular打造完整後台30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言